/* 
transition
transition-property  参与过渡的属性，默认值是all      width  color
transition-duration  过渡的时间，单位一般是s或者ms
transition-delay  过渡延迟时间,默认0
transition-timing-function  过渡的速度曲线
ease 慢快慢(默认值)  ease-in 缓慢启动  ease-out 缓慢结束  
ease-in-out 开始和结束缓慢  linear 匀速
*/
body {
    height: 5000px;
}

article {
    width: 500px;
    height: 500px;
    border: 2px solid;
}

article div {
    width: 0px;
    height: 50px;
    background-color: red;
    margin: 30px;
}

article:hover div:first-child {
    width: 400px;
    transition-duration: 5s;
    transition-timing-function: ease;
    transition-delay: 2s;
}

/* 所有子元素排序 */
article:hover div:nth-child(2) {
    width: 400px;
    transition-duration: 5s;
    transition-timing-function: ease-in;
}

article:hover div:nth-child(3) {
    width: 400px;
    transition-duration: 5s;
    transition-timing-function: ease-out;
}

article:hover div:nth-child(4) {
    width: 400px;
    transition-duration: 5s;
    transition-timing-function: ease-in-out;
}

/* 先筛选类型，再排序 */
/* article div:nth-of-type(odd){

} */

article:hover div:last-child {
    width: 400px;
    transition-duration: 5s;
    transition-timing-function: linear;
}



section {
    width: 400px;
    height: 400px;
    border: 2px solid;
}

section div {
    margin-top: 20px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: red;
    position: relative;
    left: 0;
    transition-duration: 3000ms;
}

section:hover div {
    background-color: yellow;
    left: 350px;
}


section:hover div:nth-child(1) {
    transition-property: all;
}

section:hover div:nth-child(2) {
    transition-property: left;
}

section:hover div:nth-child(3) {
    transition-property: background-color;
}

section:hover div:nth-child(4) {
    transition-property: background-color, left;
}


.box {
    width: 200px;
    height: 200px;
    background-color: palegoldenrod;
}

.box:hover {
    width: 400px;
    height: 400px;
    transition: 2s linear width, 2s 3s linear height;
}

/* 第一种 */

aside img {
    width: 200px;
    height: 300px;
    position: absolute;
    left: 0;
    top: 0;
    transition: 1s;
}

aside {
    position: relative;
}

aside:hover img:nth-child(2) {
    opacity: 0;
}

/* 第二种 */
.parent {
    width: 200px;
    height: 300px;
    background-image: url('./../../img/dog.jpg');
    background-size: 200px 300px;
    transition: 1s;

}

.parent:hover {
    background-image: url('./../../img/xiaokonglong.jpg');
}

/* 第三种 */

.father{
    width: 200px;
    height: 300px;
    background-image: url('../../img/xiaokonglong.jpg');
    background-size: 200px 300px;
}

.father img{
    width: 200px;
    height: 300px;
    transition: 1s;
}

.father:hover img{
    opacity: 0;
}